<template>
  <Dialog
    title="选择负责人"
    v-model="visible"
    :width="1000"
    align-center
  >
    <el-form :inline="true" :model="searchData" class="mb-12" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="searchData.name" class="formInp" clearable placeholder="请输入姓名" @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="searchData.phone" class="formInp" clearable placeholder="请输入联系电话"
              @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="tableData">
      <template v-for="item in personalColumn" :key="item.prop">
        <el-table-column
          :width="item.width"
          :align="item.align ? item.align : 'center'" 
          :label="item.label"
          :prop="item.prop"
        >
          <template #default="scope">
            <div v-if="item.prop === 'position'">
              <span v-if="scope.row.position && scope.row.position.length > 0">{{ scope.row.position.join('/') }}</span>
              <span v-else>-</span>
            </div>
            <div v-else-if="item.prop === 'departmentId'">{{ scope.row.departmentId ? findDeptNameById(deptTree, scope.row.departmentId) : '-' }}</div>
            <div v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}</div>
          </template>
        </el-table-column>
      </template>
      <el-table-column :width="100" align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="checkRow(scope.row)">
            选择
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div class="!h-40px">
      <Pagination v-model:limit="searchData.pageSize" v-model:page="searchData.pageNo" :total="total" @pagination="getList" />
    </div>
  </Dialog>
</template>
<script setup>
  import {ref,reactive,defineEmits} from "vue"
  import { personalColumn } from './jsonAndRules'
  import * as PersonnelApi from '@/api/system/personnel'
  const visible = ref(false)
  const searchData = reactive({
    name: '',
    phone: '',
    userType: 2,
    pageNo: 1,
    pageSize: 10,
  })
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const tableData = ref([]) // 列表的数据
  const selectionList = ref([])
  const deptTree = inject('deptTree') // 树形结构
  const findDeptNameById = inject('findDeptNameById')
  const emit = defineEmits(['change'])
  const init = () => {
    visible.value = true
    getList()
  }
  const message = useMessage() // 消息弹窗
  /** 查询角色列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await PersonnelApi.getPersonnelList(searchData)

      tableData.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    searchData.pageNo = 1
    getList()
  }
  /** 重置按钮操作 */
  const resetQuery = () => {
    searchData.name = ''
    searchData.creditCode = ''
    getList()
  }

  const tableSelectionChange = (selection) => {
    selectionList.value = selection
  }

  const checkRow = (row) => {
    let parms = {
      id: row.id,
      name: row.name,
      phone: row.phone,
      position: row.position,
      departmentId: row.departmentId,
    }
    visible.value = false
    emit('change', parms)
  }

  defineExpose({
    init
  })
</script>
<style lang="scss" scoped>
::v-deep .el-form-item{
  width: auto;
}
</style>
